/**
* 功能描述: 警告提醒demo
* @author 崔孝楠
* @date 2022/10/6 17:16
* @version 1.0
*/
<template>
  <div>
    <!-- info 基础用法 -->
    <div class="yw-alert yw-alert-info">
      <div class="yw-alert-content">
        <div class="yw-alert-message">info text</div>
      </div>
    </div>

    <!-- success 基础用法 -->
    <div class="yw-alert yw-alert-success">
      <div class="yw-alert-content">
        <div class="yw-alert-message">sucess text</div>
      </div>
    </div>

    <!-- warning 基础用法 -->
    <div class="yw-alert yw-alert-warning">
      <div class="yw-alert-content">
        <div class="yw-alert-message">warning text</div>
      </div>
    </div>

    <!-- error 基础用法 -->
    <div class="yw-alert yw-alert-error">
      <div class="yw-alert-content">
        <div class="yw-alert-message">error text</div>
      </div>
    </div>

    <!-- info 带关闭按钮 -->
    <div class="yw-alert yw-alert-info">
      <!-- 提醒文字 -->
      <div class="yw-alert-content">
        <div class="yw-alert-message">info text</div>
      </div>
      <!-- 关闭图标 -->
      <div class="yw-alert-close-icon">
        <svg focusable="false" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
          <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
        </svg>
      </div>
    </div>

    <!-- info 带警示图标 -->
    <div class="yw-alert yw-alert-info">
      <!-- 提醒图标 -->
      <div class="yw-alert-icon">
        <svg focusable="false" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path>
        </svg>
      </div>
      <!-- 提醒文字 -->
      <div class="yw-alert-content">
        <div class="yw-alert-message">info text</div>
      </div>
    </div>

    <!-- info 带介绍描述性文字 -->
    <div class="yw-alert yw-alert-info yw-alert-with-description">
      <!-- 提醒图标 -->
      <div class="yw-alert-icon">
        <svg focusable="false" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896">
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"></path>
        </svg>
      </div>
      <!-- 提醒文字 -->
      <div class="yw-alert-content">
        <div class="yw-alert-message">info text</div>
        <div class="yw-alert-description">
          Additional description and informations about copywriting.
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>
.yw-alert {
  margin-bottom: 10px;
}
</style>
